<template>
  <section>
    <el-card class="margin-top">
      <div slot="header" class="clearfix relative">
        <el-row class="flex align-center ">
          <el-col>
            <span class="title-icon">尺寸信息</span>
          </el-col>
        </el-row>
      </div>

      <div class="padding">
        <hot-table ref="hotTable" :settings="hotSettings" :data="goodsInfo" />
      </div>
    </el-card>
  </section>
</template>

<script>
import { HotTable } from '@handsontable/vue'
// import Handsontable from 'handsontable'
import 'handsontable/languages/zh-CN'
import globalData from '@/utils/config'
export default {
  name: 'OrderToOrderToOverseasWarehouseShipping',
  components: {
    HotTable
  },
  props: {
    goodsInfo: {
      type: Array,
      default: function(params) {
        return [{}]
      }
    }
    // waybillId: {
    //   type: Number
    // }
  },

  data() {
    return {
      uploadDialog: false,
      hotSettings: {
        rowHeaders: true, // 行表头
        stretchH: 'all', // 所有列宽小于表宽时,填充满整个表 all（所有列填充）/last（最后一列）/none(不填充)
        licenseKey: globalData.licensekey,
        // 定义表结构
        colHeaders: [
          '<i style="color:red;margin-right:3px">*</i>件数',
          '<i style="color:red;margin-right:3px">*</i>长(CM)',
          '<i style="color:red;margin-right:3px">*</i>宽(CM)',
          '<i style="color:red;margin-right:3px">*</i>高(CM)',
          '<i style="color:red;margin-right:3px">*</i>重量(KG)'
        ],
        width: '100%',
        height: 'auto',

        columns: [
          {
            data: 'cases', // 指定所指列
            allowEmpty: false,
            type: 'numeric',
            numericFormat: {
              pattern: '0'
            }
          },
          {
            data: 'length',
            allowEmpty: false,
            type: 'numeric',
            numericFormat: {
              pattern: '0.00'
            }
          },
          {
            data: 'width',

            allowEmpty: false,
            type: 'numeric',
            numericFormat: {
              pattern: '0.00'
            }
          },
          {
            data: 'height',

            allowEmpty: false,
            type: 'numeric',
            numericFormat: {
              pattern: '0.00'
            }
          },
          {
            data: 'weight',
            allowEmpty: false,
            type: 'numeric',
            numericFormat: {
              pattern: '0.00'
            }
          }
        ],
        tableClassName: ['first-class-name', 'second-class-name'],
        language: 'zh-CN',
        contextMenu: ['row_above', 'row_below', 'remove_row', 'alignment'], // 开启右键菜单
        beforeRemoveRow: (index, amount, physicalRows, source) => {
          if (this.goodsInfo.length === 1) {
            const arr = []
            arr.push({ waybillId: this.waybillId ? this.waybillId : null })
            this.$emit('update:goodsInfo', arr)
            console.log('this.goodsInfo :>> ', this.goodsInfo)
          }
        },
        afterCreateRow: (index, amount, source) => {
          const arr = [...this.goodsInfo]
          arr[index].waybillId = this.waybillId ? this.waybillId : null
          this.$emit('update:goodsInfo', arr)
        }
      }
    }
  },
  watch: {
    goodsInfo(newValue, oldValue) {
      console.log('goodsInfo:newValue :>> ', newValue)
      if (newValue.length === 0) {
        this.$emit('update:goodsInfo', [{}])
      }
    }
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.relative {
  .absolute {
    right: 10px;
    top: -40%;
  }
}
</style>
